<template>
  <el-menu class="navbar"
           mode="horizontal">

    <!-- 收缩按钮 -->
    <hamburger class="hamburger-container"
               :toggleClick="toggleSideBar"
               :isActive="sidebar.opened"></hamburger>

    <!-- 面包屑 -->
    <breadcrumb class="breadcrumb-container"></breadcrumb>

    <!-- 头部右侧 选项 -->
    <div class="right-menu">
      <!-- 全屏 -->
      <el-tooltip effect="dark"
                  content="全屏"
                  placement="bottom">
        <screenfull class="right-menu-item"></screenfull>
      </el-tooltip>

      <!-- 快捷菜单 -->
      <el-dropdown class="right-menu-item">
        <el-button type="primary"
                   size="mini">
          用户名
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>
              <!-- 首页 -->
              首页
            </el-dropdown-item>
          </router-link>
          
            <el-dropdown-item>
              <!-- 个人中心 -->
             <span @click="showInfo()"
                  style="display:block;">
              个人信息
            </span>
            </el-dropdown-item>
   
            <el-dropdown-item>
              <span @click="showPass()"
                  style="display:block;">
              修改密码
            </span>
            </el-dropdown-item>
          
          <el-dropdown-item divided>
            <span @click="logout()"
                  style="display:block;">
              <!-- 退出 -->
              退出
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 国际化 -->
      <el-dropdown class="right-menu-item"
                   @command="changeLang">
        <a href="javascript:void(0);">
          {{getLang()}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </a>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="cn">简体中文</el-dropdown-item>
          <el-dropdown-item command="tw">繁體中文</el-dropdown-item>
          <el-dropdown-item command="en">English</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
    
    <div>

        <!--修改手机号-->
      <div class="v-modal" tabindex="0" style="z-index: 2014;" v-show="showphone2"  @click="hidephone()"></div>
      <el-card class="box-card userInfo2"  v-show="showphone2">
         <div slot="header" class="clearfix">
          <span style="font-weight:bold">修改手机号</span>
          <el-button style="float: right; padding: 3px 0;color:gray" type="text" @click="hidephone()" class="el-icon-close"></el-button>
        </div>
         
           <el-form :model="form">
    
            <el-form-item label="新的手机号:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="新的手机号" v-model="form.mobile" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>

            <el-form-item label="验证码:" label-width="30%" style="text-align:right">

               <el-input  size="mini" placeholder="验证码" v-model="form.code" autocomplete="off" style="width:35%;float:left"></el-input>
               <el-button type="primary" class="sendcode" v-show="show" size="mini" style="float:left;margin-left:5px" @click="getCodepass()">发送验证码</el-button>
               <el-button type="primary" class="sendcode" v-show="!show" size="mini" style="float:left;margin-left:5px" >{{count}} s</el-button>
            </el-form-item>
          </el-form>
         
          <div class="dialog-footer">
           
            <el-button type="primary" class="userinfo2btn" size="mini" style="float:right"  @click="changePhone()">确 定</el-button>
            <el-button type="info" class="userinfo2btn" size="mini" style="float:right"  @click="hidephone()">取 消</el-button>
          </div>
      </el-card>


      <!--个人信息-->
      <div class="v-modal" tabindex="0" style="z-index: 2014;" v-show="showuserinfo"  @click="hideinfo()"></div>
      <el-card class="box-card userInfo"  v-show="showuserinfo">
         <div slot="header" class="clearfix">
          <span style="font-weight:bold">个人信息</span>
          <el-button style="float: right; padding: 3px 0;color:gray" type="text" @click="hideinfo()" class="el-icon-close"></el-button>
        </div>
         
           <el-form :model="userInfo">
    
            <el-form-item label="工号:" label-width="25%" style="text-align:right"> 
              <el-input  size="mini" placeholder="工号" disabled v-model="userInfo.employeeNo" autocomplete="off" style="width:65%;float:left"></el-input>
            </el-form-item>
            <el-form-item label="账号:" label-width="25%" style="text-align:right">
              <el-input  size="mini" placeholder="账号" disabled v-model="userInfo.account" autocomplete="off" style="width:65%;float:left"></el-input>
            </el-form-item>

            <el-form-item label="手机号:" label-width="25%" style="text-align:right">
              
              <el-input  size="mini" placeholder="手机号" disabled v-model="userInfo.mobile" autocomplete="off" style="width:65%;float:left"></el-input>
              <!--<el-button type="primary" size="mini" class="infobtn" style="float:right" @click="showpass()">修改手机号</el-button>-->
              <span @click="showphone()" style="width:80px !important;color:blue;cursor:pointer;float:left;">修改手机号</span>
            </el-form-item>

            <el-form-item label="岗位角色:"  label-width="25%" style="text-align:right">
              <el-input  size="mini" placeholder="岗位角色" disabled v-model="userInfo.roleName" autocomplete="off" style="width:65%;float:left"></el-input>
            </el-form-item>
            <div style="color:red;height:50px;line-height:50px;text-align:center;font-size:14px;">注: 如信息有误，请联系FoxCore客服</div>

          </el-form>
         
          <div class="dialog-footer">
            <el-button type="primary" size="mini" style="float:right" @click="hideinfo()">确 定</el-button>
          </div>
      </el-card>


      <!--修改密码-->
      <div class="v-modal" tabindex="0" style="z-index: 2014;" v-show="showpass"  @click="hidepass()"></div>
      <el-card class="box-card userInfo2"  v-show="showpass"> 
         <div slot="header" class="clearfix">
          <span style="font-weight:bold">修改密码</span>
          <el-button style="float: right; padding: 3px 0;color:gray" type="text" @click="hidepass()" class="el-icon-close"></el-button>
        </div>
         
           <el-form :model="form">
    
            <el-form-item label="原密码:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="原密码" v-model="form.oldPassword" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>
            <el-form-item label="新密码:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="新密码" v-model="form.pass" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>
               <el-form-item label="确认新密码:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="确认新密码" v-model="form.newpass" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>
       
          </el-form>
         
          <div class="dialog-footer">
           
            <el-button type="primary" class="userinfo2btn" size="mini" style="float:right"  @click="changePassword()">确 定</el-button>
            <el-button type="info" class="userinfo2btn" size="mini" style="float:right"  @click="hidepass()">取 消</el-button>
          </div>
      </el-card>

</div>
  
  </el-menu>

</template>

<script>
import { mapGetters } from "vuex";
import Hamburger from "@/components/Hamburger";
import Breadcrumb from "@/components/Breadcrumb";
import Screenfull from "@/components/Screenfull";

import {
		USERINFO,MODIFYMOBILE,SMSMODIFYMOBILE,MODIFYPASS
	} from '@/utils/api';
import { Message } from "element-ui";
const TIME_COUNT = 60; // 倒计时的时间

export default {
  data () {
    return {
      show:true,
      count:'',
      showpass:false, //显示密码
      showuserinfo:false,//显示个人信息
      showphone2:false,//显示修改手机
      form:{
        employeeNo:'',
        account:'',
        mobile:'',
        ruleName:'',
        oldPassword:'',
        pass:'',
        newpass:'',
      },
      userInfo:{}
    };
  },
  components: {
    Breadcrumb,
    Hamburger,
    Screenfull
  },
  computed: {
    ...mapGetters(["sidebar"])
  },
  created(){
     this.getUserinfo()
  },

  methods: {
    //显示密码
    showPass(){
      this.showpass = true
    },
    //隐藏密码
    hidepass(){
      this.showpass = false
    },
    //修改密码
    changePassword(){
      var _this = this;
      if (_this.form.oldPassword === "") {
        Message.error({ message: "请输入原密码" });
        return;
      }
      if (_this.form.pass === "") {
        Message.error({ message: "请输入新密码" });
        return;
      }
      if (_this.form.pass !== _this.form.newpass) {
        Message.error({ message: "两次密码不一致" });
        return;
      }

      MODIFYPASS({
        oldPassword: _this.form.oldPassword,
        pass: _this.form.pass
      }).then(res => {
        Message.success({ message: "修改成功" });
        _this.showpass = false 
        _this.form.oldPassword = ''
        _this.form.pass = ''
        _this.form.newpass = ''
         
      });
    },
    //显示个人信息
    showInfo(){
       //this.$store.commit("CHANGEPASS2_HIDE");
       //this.$store.commit("SHOWCARD"); 
       this.showuserinfo = true
    },
    //隐藏个人信息
    hideinfo(){
       this.showuserinfo = false
    },
    //获取个人信息
		getUserinfo() {
				this.loading = true
				USERINFO({}).then(res => {
						this.loading = false
					  this.userInfo = res.data
					 
					})
					.catch(() => {})

    },
    //显示修改手机
    showphone(){
      this.showuserinfo = false
      this.showphone2 = true
    },
    //隐藏修改手机
    hidephone(){
      this.showphone2 = false
    },
    //发送验证码
    getCodepass() {
      var _this = this;
      if (_this.form.mobile === "") {
        Message.error({ message: "请输入新手机号" });
        return;
      }
      SMSMODIFYMOBILE({
        mobile: _this.form.mobile
      }).then(res => {
        // 验证码倒计时
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      });
    },
    //执行 修改手机号
    changePhone(){
      var _this = this;
      if (_this.form.mobile === "") {
        Message.error({ message: "请输入新手机号" });
        return;
      }
      if (_this.form.code === "") {
        Message.error({ message: "请输入验证码" });
        return;
      }

      MODIFYMOBILE({
        mobile: _this.form.mobile,
        code: _this.form.code
      }).then(res => {
        Message.success({ message: "修改成功" });
      
      });

    },
    //收缩按钮事件
    toggleSideBar () {
      this.$store.dispatch("toggleSideBar");
    },
    // 切换国际化
    changeLang (lang) {
      this.$i18n.locale = lang;
      localStorage.setItem("lang", lang);
    },
    // 选中文案
    getLang () {
      let lang = this.$i18n.locale;
      switch (lang) {
        case "cn":
          return "简体中文";
        case "tw":
          return "繁體中文";
        case "en":
          return "English";
        case "ja":
          return "日本語";
        case "ko":
          return "한국어";
      }
    },
    //退出登录
    logout () {
      this.$router.push("/login");
      // 已退出
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>


  .el-card.userInfo{
    position: fixed;
    top: 20%;
    width: 30%;
    left: 35%;
    z-index: 2015;
  }
  .el-card.userInfo2{
    position: fixed;
    top: 20%;
    width: 30%;
    left: 35%;
    z-index: 2015;
  }
  .userInfo .el-form-item{
    margin-bottom:10px;
  }
  .userInfo .el-form-item__content{
    margin-left:0;
  }
  .userInfo .el-card__body,.userInfo2 .el-card__body{
      border-bottom: 1px solid #EBEEF5;
      padding-bottom: 0px;
      padding: 20px 25px;
  }
  .userInfo .el-button--primary{
      margin: 30px 0px 10px 0px
  }
  
  .el-card.userInfo2 .sendcode{
   margin: 0;
   height: 30px;
   margin-top: 5px;
   margin-right: 46px;
  }
  .userinfo2btn{
    margin: 30px 10px 10px 0px
  }



.navbar {
  height: 50px;
  line-height: 50px;
  border-radius: 0px !important;
  .hamburger-container {
    line-height: 58px;
    height: 50px;
    float: left;
    padding: 0 0.5rem 0 1rem;
  }
  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    height: 100%;
    &:focus {
      outline: none;
    }
    .right-menu-item {
      display: inline-block;
      margin: 0 8px;
    }

    .theme-switch {
      vertical-align: 15px;
    }
  }
}
</style>
